import {ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';

import {SliderStyle} from '../../../../../data-types/slider.types';

@Component({
  selector: 'app-slider-track',
  template: `
    <div class="slider-track" [class.buffer]="buffer" [ngStyle]="style"></div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SliderTrackComponent implements OnInit, OnChanges {

  @Input() vertical = false;

  @Input() length: number;

  @Input() buffer = false;

  public style: SliderStyle;

  constructor() {
    this.style = {};
  }

  ngOnInit(): void {
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.length) {
      if (this.vertical) {
        this.style.height = this.length + '%';
        this.style.left = null;
        this.style.width = null;
      } else {
        this.style.width = this.length + '%';
        this.style.bottom = null;
        this.style.height = null;
      }
    }
  }

}
